Route navigation using getX

  • Steps

    Step 1:Add get package to pubspec.yaml file:

    
                            get: 
                          

    Step 2: Import get package in main.dart file

    
                          import 'package:get/get.dart';
                          

    Step 3: Define routes on GetMaterialApp():

    
    					   void main() {
    						runApp(
    							GetMaterialApp(
    							initialRoute: '/',
    							unknownRoute: GetPage(name: '/notfound', page: () => UnknownRoutePage()), //like 404 page in web
    							getPages: [
    								GetPage(name: '/', page: () => MyHomePage()),
    								GetPage(name: '/second', page: () => Second()),
    								GetPage(
    								name: '/third',
    								page: () => Third(),
    								transition: Transition.zoom  
    								),
    							],
    							)
    						);
    						}
    
    						
    To go to new named route page:
    
    						Get.toNamed("/NextScreen");
    						
    To go to new page with arguement:
    
    						Get.toNamed("/NextScreen", arguments: 'Get is the best');
    						
    get argument on next screen:
    
    						print(Get.arguments);
    						
    Go to new page with dynamic parameters on route names:
    
    						Get.offAllNamed("/NextScreen?device=phone&id=354&name=Enzo");
    						
    on new screen, get these parameters:
    
    						print(Get.parameters['id']);
    						// out: 354
    						print(Get.parameters['name']);
    
    					    
    Full code
    
    
    						import 'package:flutter/material.dart';
    import 'package:get/get.dart';
    void main() {
      runApp(
        GetMaterialApp(
          home: MyApp(),
        )
      );
    }
    
    class MyApp extends StatelessWidget{
      @override
      Widget build(BuildContext context) {
        return Scaffold(
              appBar: AppBar(
                  title:Text("Navigation Using GetX"),
                  backgroundColor: Colors.purple,
              ),
              body: Container( 
                  alignment: Alignment.center,
                  child: Column(
                    children: [
                        ElevatedButton(
                          onPressed:(){
                              Get.to(PageOne());
                          }, 
                          child: Text("Go to Page One")
                        ),
    
                        ElevatedButton(
                          onPressed:(){
                              Get.off(PageTwo());
                          }, 
                          child: Text("Go to Page Two and Clear Previous Route")
                        ),
    
                        ElevatedButton(
                          onPressed:(){
                              Get.offAll(PageThree());
                          }, 
                          child: Text("Go to Page Three and Clear All Previous History")
                        ),
                    ],
                  ),     
              )
          );
      }
    }
    
    //Screen One, you can create another file for this class
    class PageOne extends StatelessWidget{
      @override
      Widget build(BuildContext context) {
          return Scaffold(
             appBar: AppBar(title:Text("Page One")),
             body: Container(
               alignment: Alignment.center,
                child: ElevatedButton(
                   onPressed:(){
                       Get.back();
                       //go to previous page
                   }, 
                   child: Text("Go Back")
                  ),
             ),
          );
      }
    
    }
    
    //Screen Two, you can create another file for this class
    class PageTwo extends StatelessWidget{
      @override
      Widget build(BuildContext context) {
        return Scaffold(
             appBar: AppBar(title:Text("Page Two")),
             body: Container(
               alignment: Alignment.center,
                child: ElevatedButton(
                   onPressed:(){
                       Get.back();
                       //app will be closed, because there is one previous route, and its cleared,
                       //if there were many previous routes, it will escape, one back route, because, 
                       //the route just before this page is cleared by Get.off().
                   }, 
                   child: Text("Go Back")
                  ),
             ),
          );
      }
    }
    
    //Screen Three, you can create another file for this class
    class PageThree extends StatelessWidget{
      @override
      Widget build(BuildContext context) {
         return Scaffold(
             appBar: AppBar(title:Text("Page Three")),
             body: Container(
                alignment: Alignment.center,
                child: ElevatedButton(
                   onPressed:(){
                       Get.back();
                       //app will closed, because all previous route history are cleared
                       // by Get.offAll()
                   }, 
                   child: Text("Go Back")
                  ),
             ),
          );
      }
    
    }
    
    
    

    Another example

    in main.dart

    
    return GetMaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'GetX Store',
          initialBinding: StoreBinding(),
          theme: Themes.lightTheme,
          darkTheme: Themes.darkTheme,
          themeMode: themeController.theme,
          initialRoute: '/',
          getPages: [
            GetPage(
              name: '/',
              page: () => Home(),
            ),
            GetPage(name: '/edit_name', page: () => UpdateStoreName()),
            GetPage(name: '/add_followers', page: () => AddFollowers()),
            GetPage(name: '/toggle_status', page: () => StoreStatus()),
            GetPage(name: '/edit_follower_count', page: () => AddFollowerCount()),
            GetPage(name: '/add_reviews', page: () => AddReviews()),
            GetPage(name: '/update_menu', page: () => const UpdateMenu()),
          ],
          home: Home(),
        );
    
      

    in call

    
                 onTap: () {
                    // closes the drawer and goes to another screen
                    Get.offAndToNamed('/edit_name');
                    
                  }),
    
        
    Here used named route instead of function name